<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getStuList,getStuListByClassroomId} from "../../apis/StudentApi.ts";
import { getCourseAssignmentList } from "../../apis/CourseAssignmentApi";
import { getDepList } from "../../apis/DepartmentApi";
import { getClassroomList } from "../../apis/ClassroomApi";

const loginNum = ref(0)
const courseNum = ref(0)
const assingmentNum = ref(0)

const bingOption = ref({
  title: {
    text: "各学院学生人数",
    top: "0%",
    left: "center"
  },
  series: [
    {
      type: "pie", // type设置为饼图
      label: {
        show: true,
        formatter: "{b} : {c}人 ({d}%)" // b代表名称，c代表对应值，d代表百分比
      },
      data: []
    }
  ]
})

const getToDayLoginNum = async () => {
    let res = await getStuList();
    if (res.flag){
      //筛选最近登录时间为今日登录的人数
      res.data.forEach((item) => {
        //将字符串日期转为Date
        let date = new Date(item.loginTime)
        if (date.getDay() === new Date().getDay()){
          loginNum.value++
        }
      })
    }
}
//计算课程数量
const getCourseNum = async () => {
  let res = await getStuList();
  if (res.flag){
    courseNum.value = res.data.length
  }
}
//获取选课人数
const getCourseAssignmentNum = async () => {
    let res = await getCourseAssignmentList();
    if(res.flag){
      assingmentNum.value = res.data.length
    }
}
//获取每个学院下的人数
const getStudentGroupDep = async () => {
  //获取学员
  let depRes = await getDepList()
  for (let i = 0; i < depRes.data.length; i++) {
    let classRes = await getClassroomList(depRes.data[i].id)
    let num = 0;
    //计算每个班级下的学生
    for (let j = 0; j < classRes.data.length; j++) {
      let stuRes = await getStuListByClassroomId(classRes.data[j].id)
      num += stuRes.data.length
    }
    bingOption.value.series[0].data.push({
      name: depRes.data[i].name,
      value: num
    })
  }
}
onMounted(async () => {
  await getToDayLoginNum()
  await getCourseNum()
  await getCourseAssignmentNum()
  await getStudentGroupDep()


})
</script>

<template>
  <el-row :gutter="16">
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="loginNum">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              今日登录人数
              <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one day"
                  placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <CaretTop />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>

      </div>
    </el-col>
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="courseNum">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              课程数量
              <el-tooltip
                  effect="dark"
                  content="可选课程数"
                  placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>

      </div>
    </el-col>
    <el-col :span="8">
      <div class="statistic-card">
        <el-statistic :value="assingmentNum" title="">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              已选课人数
            </div>
          </template>
        </el-statistic>
      
      </div>
    </el-col>
  </el-row>

  <v-chart  class="echart bingtu" autoresize  id="mychart" :option="bingOption"></v-chart >

</template>

<style scoped>
.bingtu{
  height: 400px;
}
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>